<template>
  <div>
    <navList></navList>
    <div class="company-profile">
      <div class="subtitle"><span>{{ $t('navbar.introduction') }}</span><i></i></div>
      <div class="profile-wrapper pc-only">
        <p class="profile" v-html="profile"></p>
        <div class="company-cover"></div>
      </div>
      <div class="profile-wrapper phone-only">
        <div class="company-cover"></div>
        <p class="first-p" v-html="profile"></p>
      </div>
    </div>
  </div>
</template>

<script>
  import navList from 'COMPS/nav-list.vue'

  export default {
    name: 'company-profile',
    components: {
      navList
    },
    data() {
      return {
        
      }
    },
    computed: {
      profile() {
        return this.$t('profile');
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .company-profile {
    display: inline-block;
    width: 880px;
    .profile-wrapper {
      display: flex;
      margin-top: 25px;
      .On-xs({
        display: inline-block;
        margin-top: 15px;
      });
      .profile {
        // display: inline-block;
        vertical-align: top;
        // width: 500px;
        flex: 1;
        min-height: 350px;
        margin-right: 25px;
        font-size: 16px;
        line-height: 32px;
        color: #666;
        .On-xs({
          width: 100%;
          margin-right: 0px;
          font-size: 14px;
          line-height: 21px;
          height: 100%;
        });
      }
      // .first-p {
      //   width: 100%;
      //   font-size: 14px;
      //   color: #666;
      // }
      .company-cover {
        // display: inline-block;
        vertical-align: top;
        width: 350px;
        height: 350px;
        background-image: url(~IMGS/company.png);
        .On-xs({
          float: left;
          width: 150px;
          height: 140px;
          margin-right: 25px;
          margin-bottom: 10px;
          border-radius: 5px;
        });
      }
    }
  }
</style>